<template>
  <div class="home">
    <el-menu :default-active="activeIndex" class="el-menu-demo" router mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">井类型</el-menu-item>
      <el-menu-item index="/AlertMessageList">告警信息</el-menu-item>
     </el-menu>
    <div class="line"></div>
        <el-button type="primary" @click="showBooks()" style="float:left; margin: 2px;">获取井信息</el-button>
    <el-row>
        <el-table :data="bookList" style="width: 100%" border>
          <el-table-column prop="id" label="编号" >
            <template slot-scope="scope"> {{ scope.id }} </template>
          </el-table-column>
          <el-table-column prop="well_name" label="井名" >
            <template slot-scope="scope" > {{ scope.row.well_name }} </template>
          </el-table-column>
          <el-table-column prop="construction_time" label="建井时间" >
            <template slot-scope="scope" > {{ scope.row.construction_time }} </template>
          </el-table-column>
          <el-table-column prop="well_picture" label="图片" >
            <template slot-scope="scope"> {{ scope.row.well_picture }} </template>
          </el-table-column>
 
        </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WellCondition',
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      bookList: [],
      activeIndex: '1',
      activeIndex2: '1',
      token: '',
    }
  },
  mounted: function() {
    this.login()
  },
  methods: {
     handleSelect(key, keyPath) {
      console.log(key, keyPath);

    },
     login(){
      let url = 'http://192.168.1.109:8000/api-token-auth/login/'
      this.$http.post(url,{username:'test',password: '12345qwe'})
        .then((response) => {
          console.log(response)
            if (response.status == 200) {
              this.token = response.data.token
              this.addWell()
              // this.showBooks()
            } else {
              this.$message.error('登陆失败，请重试')
              console.log(response['msg'])
            }
        })
    },
    showBooks(){
              console.log(this.token)
      let getid= this.$route.params.well_name
      this.$http.get(this.setData.resUrl + '/well_info/' + getid + '/', {headers: {
      Authorization: 'Token ' + this.token
    }})
        .then((response) => {
            // var res = JSON.parse(response.bodyText)
            console.log(response.data)
            if (response.status == 200) {
              this.bookList = response
            } else {
              this.$message.error('查询井名失败')
              console.log(res['msg'])
            }
        })
    },
    addWell(){
              console.log(this.token)
      let getid= this.$route.params.well_name
      this.$http.delete(this.setData.resUrl + '/well_info/' + getid + '/', {headers: {
      Authorization: 'Token ' + this.token
    }})
        .then((response) => {
            // var res = JSON.parse(response.bodyText)
            console.log(response.data)
            if (response.status == 200) {
              let res = response.data
              res.well_name = '测试井234'
              res.construction_time = '2018/12/24'
              res.well_picture = 'http://124343.com'

            } else {
              this.$message.error('查询井名失败')
              console.log(res['msg'])
            }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>